<template>
  <div id="top-header">
    <div class="center-title">智慧幼儿园大数据展示</div>
    <div class="left-time">{{ nowDate }}</div>
  </div>
</template>

<script>
import { formatDate } from '@/utils/function'
export default {
  name: 'TopHeader',
  data() {
    return {
      nowDate: "", // 当前日期
    };
  },
  methods: {
    currentTime() {
      setInterval(res=> {
        this.nowDate = formatDate()
      }, 500);
    },
  },
  mounted() {
    this.currentTime();
  },
  // 销毁定时器
  beforeDestroy() {
    if (formatDate) {
      clearInterval(formatDate); // 在Vue实例销毁前，清除时间定时器
    }
  }
}
</script>

<style lang="less" scoped>
#top-header {
  position: relative;
  width: 100%;
  height:86px;
  display: flex;
  justify-content: space-between;
  flex-shrink: 0;
  background:url(../../assets/img/header-bg.jpg) no-repeat center center;
} 
  .header-center-decoration {
    width: 40%;
    height: 60px;
    margin-top: 30px;
  }

  .header-left-decoration, .header-right-decoration {
    width: 25%;
    height: 60px;
  }

  .center-title {
    position: absolute;
    font-size: 38px;
    left: 50%;
    top: 15px;
    transform: translateX(-50%);
    color:#01c4f7;
  }
.left-time{ line-height: 140px; font-size:25px; margin-left: 50px; color:#fff; margin-top: 20px;}
</style>
